import React, {createRef, memo, useCallback, useEffect, useState} from 'react';
import {AddMusicWrapper} from "./style";
import {withRouter} from "react-router";
import {Button, Image, Input} from "antd";
import {SoundOutlined} from "@ant-design/icons";
import {saveMusic, updateMusic, getMusicById} from "@/network/music.request";
import setMessage from "@/utils/setMessage";

function AddMusic(props) {
  const {m_id} = props.match.params;
  const audioRef = createRef();

  const [musicId, setMusicId] = useState("");
  const [name, setName] = useState("");
  const [artist, setArtist] = useState("");
  const [cover, setCover] = useState("");
  const [url, serUrl] = useState("");

  useEffect(() => {
    audioRef.current.volume = 0.2;
  }, [audioRef])

  const clearInput = useCallback(() => {
    setMusicId("");
    setName("");
    setArtist("");
    setCover("");
    serUrl("");
  }, [])

  useEffect(() => {
    if (String(m_id) === "0") { // 创建
      clearInput()
    } else {
      getMusicById(m_id).then(res => {
        setMusicId(res.musicId);
        setName(res.name);
        setArtist(res.artist);
        setCover(res.cover);
        serUrl(res.url);
      }).catch(console.log)
    }
  }, [m_id, clearInput])


  const handleSaveMusic = useCallback(() => {
    if (musicId.trim() !== "" && name.trim() !== "" && artist.trim() !== "" && cover.trim() !== "" && url.trim() !== "") {
      if (String(m_id) === "0") { // 新建
        saveMusic(musicId, name, artist, cover, url).then(res => {
          res.affectedRows && setMessage("保存成功", "success");
          !res.affectedRows && setMessage("该音乐已存在", "error");
        }).catch(error => {
          setMessage("保存失败", "error");
          console.log(error)
        })
      } else { // 修改
        updateMusic(m_id, musicId, name, artist, cover, url).then(res => {
          res.affectedRows && setMessage("修改成功", "success");
          !res.affectedRows && setMessage("该音乐已存在", "error");
        }).catch(error => {
          setMessage("修改失败", "error");
          console.log(error)
        })
      }
    } else {
      setMessage("输入要素不完整, 保存失败", "error");
    }

  }, [m_id, musicId, name, artist, cover, url])

  return (
    <AddMusicWrapper>
      <i className="fs-1">
        <SoundOutlined className="mr-3" style={{color: "#008c8c"}}/>
        温馨提示: 如果音乐id来自网易云, 博客页可展示歌词~;
        <i> 具体获取方式 <a href="https://www.baidu.com/s?wd=如何获取网易云音乐id" style={{color: "#008a8a"}}
                      target="_blank" rel="noreferrer">这里</a></i>
      </i>
      <p>
        <SoundOutlined className="mr-3" style={{color: "#008c8c"}}/>
        音乐链接: https://music.163.com/song/media/outer/url?id=音乐id.mp3
      </p>
      <Input value={musicId} onChange={e => setMusicId(e.target.value)} className="my-8"
             placeholder="音乐id (网易云音乐id / 随机输入)"/>
      <Input value={name} onChange={e => setName(e.target.value)} className="my-8" placeholder="音乐名称"/>
      <Input value={artist} onChange={e => setArtist(e.target.value)} className="my-8" placeholder="歌手名称"/>
      <div className="music-cover">
        <Input value={cover} onChange={e => setCover(e.target.value)} className="my-8" placeholder="cover图片"/>
        <Image width={200}
               src={cover}
               className="cover"
               fallback=""
        />
      </div>
      <Input value={url} onChange={e => serUrl(e.target.value)} className="my-8" placeholder="音乐链接"/>
      <audio ref={audioRef} src={url} controls loop preload="true"/>
      <div className="pt-8 pl-6">
        <Button className="mr-7" onClick={clearInput}>清空输入</Button>
        <Button type="primary" onClick={handleSaveMusic}>保存音乐</Button>
      </div>
    </AddMusicWrapper>
  )
}

export default memo(withRouter(AddMusic))
